import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Colors, View, Drawer, Text} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

const deleteIcon = require('../../assets/icons/delete.png');
const archiveIcon = require('../../assets/icons/archive.png');
const mailIcon = require('../../assets/icons/mail.png');
const starIcon = require('../../assets/icons/star.png');

class DrawerScreen extends Component {
  state = {
    // 回调计数器
    onDragStartCount: 0,
    onFullSwipeLeftCount: 0,
    onFullSwipeRightCount: 0,
    onSwipeableWillCloseCount: 0,
    onSwipeableWillOpenCount: 0,
    onToggleSwipeLeftCount: 0,
    onWillFullSwipeLeftCount: 0,
    onWillFullSwipeRightCount: 0,
    // customValue 示例
    customValue1: '',
    customValue2: '',
  };

  render() {
    const {
      onDragStartCount,
      onFullSwipeLeftCount,
      onFullSwipeRightCount,
      onSwipeableWillCloseCount,
      onSwipeableWillOpenCount,
      onToggleSwipeLeftCount,
      onWillFullSwipeLeftCount,
      onWillFullSwipeRightCount,
      customValue1,
      customValue2,
    } = this.state;

    return (
      <TestSuite name="Drawer">
        <TestCase itShould="Drawer: bounciness=5 (弹性度低)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              bounciness={5}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - bounciness=5</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: bounciness=15 (弹性度高)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              bounciness={15}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - bounciness=15</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: customValue (用户数据)">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.blue70}
              borderRadius={10}>
              <Text>接收到的自定义值: {customValue1 || '未触发'}</Text>
            </View>
            <Drawer
              customValue={{userName: '张三', userId: 123, action: '删除'}}
              rightItems={
                ((cv: any) => [
                  {
                    text: '删除',
                    background: Colors.red30,
                    icon: deleteIcon,
                    onPress: () => {
                      this.setState({
                        customValue1: `用户: ${cv.userName}, ID: ${cv.userId}, 操作: ${cv.action}`,
                      });
                    },
                  },
                ])({userName: '张三', userId: 123, action: '删除'})
              }>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动并点击删除按钮</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: customValue (订单数据)">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.green70}
              borderRadius={10}>
              <Text>接收到的自定义值: {customValue2 || '未触发'}</Text>
            </View>
            <Drawer
              customValue={{
                orderId: 'ORD-2024-001',
                amount: 299.99,
                status: '待处理',
              }}
              leftItem={
                ((cv: any) => ({
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {
                    this.setState({
                      customValue2: `订单: ${cv.orderId}, 金额: ${cv.amount}, 状态: ${cv.status}`,
                    });
                  },
                }))({
                  orderId: 'ORD-2024-001',
                  amount: 299.99,
                  status: '待处理',
                })
              }>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动并点击归档按钮</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullSwipeLeft=false (不允许左全滑动)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={false}
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 - 不能全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullSwipeLeft=true (允许左全滑动)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={true}
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 - 可以全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullSwipeRight=false (不允许右全滑动)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={false}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 不能全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullSwipeRight=true (允许右全滑动)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={true}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 可以全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsIconSize=15 (图标小)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsIconSize={15}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 图标大小 15</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsIconSize=30 (图标大)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsIconSize={30}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 图标大小 30</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsTintColor=Colors.white (白色)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsTintColor={Colors.white}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 白色文本和图标</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsTintColor=Colors.yellow30 (黄色)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsTintColor={Colors.yellow30}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 黄色文本和图标</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsMinWidth=60 (最小宽度小)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsMinWidth={60}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 项目最小宽度 60</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsMinWidth=100 (最小宽度大)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsMinWidth={100}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 项目最小宽度 100</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsTextStyle (小字体 + 斜体)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsTextStyle={{
                fontSize: 12,
                fontStyle: 'italic',
                fontWeight: 'normal',
              }}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 小字体斜体</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: itemsTextStyle (大字体 + 粗体)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              itemsTextStyle={{
                fontSize: 18,
                fontWeight: 'bold',
                letterSpacing: 1,
              }}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 大字体粗体</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: leftItem (左侧单个项目)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 - 显示左侧项目</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: leftItem (收藏)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              leftItem={{
                text: '收藏',
                background: Colors.yellow30,
                icon: starIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 - 显示收藏</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: rightItems (1个项目)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 1个右侧项目</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: rightItems (3个项目)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
                {
                  text: '归档',
                  background: Colors.blue30,
                  icon: archiveIcon,
                  onPress: () => {},
                },
                {
                  text: '收藏',
                  background: Colors.yellow30,
                  icon: starIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 - 3个右侧项目</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onDragStart 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.blue70}
              borderRadius={10}>
              <Text>onDragStart 触发次数: {onDragStartCount}</Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              onDragStart={() =>
                this.setState({onDragStartCount: onDragStartCount + 1})
              }
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>开始拖动时触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onFullSwipeLeft 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.green70}
              borderRadius={10}>
              <Text>onFullSwipeLeft 触发次数: {onFullSwipeLeftCount}</Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={true}
              onFullSwipeLeft={() =>
                this.setState({onFullSwipeLeftCount: onFullSwipeLeftCount + 1})
              }
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右全滑动触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onFullSwipeRight 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.red70}
              borderRadius={10}>
              <Text>onFullSwipeRight 触发次数: {onFullSwipeRightCount}</Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={true}
              onFullSwipeRight={() =>
                this.setState({
                  onFullSwipeRightCount: onFullSwipeRightCount + 1,
                })
              }
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左全滑动触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onSwipeableWillClose 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.purple70}
              borderRadius={10}>
              <Text>
                onSwipeableWillClose 触发次数: {onSwipeableWillCloseCount}
              </Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              onSwipeableWillClose={() =>
                this.setState({
                  onSwipeableWillCloseCount: onSwipeableWillCloseCount + 1,
                })
              }
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>关闭时触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onSwipeableWillOpen 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.orange70}
              borderRadius={10}>
              <Text>
                onSwipeableWillOpen 触发次数: {onSwipeableWillOpenCount}
              </Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              onSwipeableWillOpen={() =>
                this.setState({
                  onSwipeableWillOpenCount: onSwipeableWillOpenCount + 1,
                })
              }
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>打开时触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onWillFullSwipeLeft 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.yellow70}
              borderRadius={10}>
              <Text>
                onWillFullSwipeLeft 触发次数: {onWillFullSwipeLeftCount}
              </Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={true}
              onWillFullSwipeLeft={() =>
                this.setState({
                  onWillFullSwipeLeftCount: onWillFullSwipeLeftCount + 1,
                })
              }
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>左全滑动之前触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onWillFullSwipeRight 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.cyan70}
              borderRadius={10}>
              <Text>
                onWillFullSwipeRight 触发次数: {onWillFullSwipeRightCount}
              </Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={true}
              onWillFullSwipeRight={() =>
                this.setState({
                  onWillFullSwipeRightCount: onWillFullSwipeRightCount + 1,
                })
              }
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>右全滑动之前触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: onToggleSwipeLeft 回调">
          <View padding-20>
            <View
              marginB-10
              padding-10
              backgroundColor={Colors.pink70}
              borderRadius={10}>
              <Text>
                onToggleSwipeLeft 触发次数: {onToggleSwipeLeftCount}
              </Text>
            </View>
            <Drawer
              useNativeAnimations={true}
              onToggleSwipeLeft={() =>
                this.setState({
                  onToggleSwipeLeftCount: onToggleSwipeLeftCount + 1,
                })
              }
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>切换左侧滑动时触发</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullLeftThreshold=0.3 (阈值低)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={true}
              fullLeftThreshold={0.3}
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 30% 即可全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullLeftThreshold=0.6 (阈值高)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeLeft={true}
              fullLeftThreshold={0.6}
              leftItem={{
                text: '已读',
                background: Colors.green30,
                icon: mailIcon,
                onPress: () => {},
              }}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向右滑动 60% 才能全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullRightThreshold=0.3 (阈值低)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={true}
              fullRightThreshold={0.3}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 30% 即可全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: fullRightThreshold=0.6 (阈值高)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              fullSwipeRight={true}
              fullRightThreshold={0.6}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>向左滑动 60% 才能全滑动</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: disableHaptic=false (启用触觉反馈)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              disableHaptic={false}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>滑动时有触觉反馈</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: disableHaptic=true (禁用触觉反馈)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              disableHaptic={true}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>滑动时无触觉反馈</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: style (蓝色边框)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              style={{
                borderWidth: 3,
                borderColor: Colors.blue30,
                borderRadius: 10,
              }}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>自定义样式 - 蓝色边框</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: style (紫色边框 + 阴影)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              style={{
                borderWidth: 2,
                borderColor: Colors.purple30,
                borderRadius: 15,
                shadowColor: Colors.black,
                shadowOpacity: 0.3,
                shadowRadius: 5,
                elevation: 5,
              }}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>自定义样式 - 紫色边框 + 阴影</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: testID='drawer-test-1'">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              testID="drawer-test-1"
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>testID="drawer-test-1"</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: testID='drawer-test-2'">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              testID="drawer-test-2"
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>testID="drawer-test-2"</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: useNativeAnimations=false (JS 动画)">
          <View padding-20>
            <Drawer
              useNativeAnimations={false}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>使用 JavaScript 动画</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>

        <TestCase itShould="Drawer: useNativeAnimations=true (原生动画)">
          <View padding-20>
            <Drawer
              useNativeAnimations={true}
              rightItems={[
                {
                  text: '删除',
                  background: Colors.red30,
                  icon: deleteIcon,
                  onPress: () => {},
                },
              ]}>
              <View centerV padding-20 bg-white style={styles.item}>
                <Text text70>使用原生动画 (更流畅)</Text>
              </View>
            </Drawer>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default DrawerScreen;

const styles = StyleSheet.create({
  item: {
    height: 60,
    borderBottomWidth: 1,
    borderColor: Colors.grey60,
  },
});
